<template>
  <div class="search-bill">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>查询条件</span>
        </div>
      </template>
      <!-- 查询面板 -->
      <el-row justify="start" style="margin-bottom: 16px" :gutter="20">
        <div>
          <el-select
            v-model="searchConf.state"
            class="m-2"
            placeholder="请选择缴费状态"
            size="large"
          >
            <el-option
              :key="'全部'"
              :label="'全部'"
              :value="'全部'"
            ></el-option>
            <el-option
              v-for="item in searchContent.stateList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div></div>
        <div class="bill-search-button">
          <el-button
            type="primary"
            plain
            :icon="Search"
            @click="getBillListByState(searchConf.state)"
            >查询</el-button
          >
        </div>
      </el-row>
    </el-card>
    <el-card>
      <!-- 控制面板 -->
      <el-row flex justify="space-between" style="margin-bottom: 16px">
        <div class="left">
          <el-button plain type="danger" :icon="Delete" @click="delPatchBills"
            >删除</el-button
          >
        </div>
        <div class="right">
          <el-pagination
            v-model:current-page="paginationConfig.currentPage"
            v-model:page-size="paginationConfig.pageSize"
            layout="prev, pager, next"
            :page-count="paginationConfig.pageCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-row>
      <el-scrollbar max-height="600px">
        <el-table
          :data="tableConfig.data"
          border
          stripe
          v-loading="tableConfig.loading"
          element-loading-text="查询中..."
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            min-width="60"
            label="序号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="created_at"
            min-width="180"
          ></el-table-column>
          <el-table-column
            label="更新时间"
            prop="updated_at"
            min-width="180"
          ></el-table-column>
          <el-table-column
            label="是否删除"
            prop="deleted"
            min-width="180"
          ></el-table-column>
          <el-table-column label="缴费状态" min-width="180">
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.state === '未交'"
                >{{ scope.row.state }}
              </el-tag>
              <el-tag type="success" v-else>{{ scope.row.state }} </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            label="折扣"
            prop="discount_percent"
            min-width="150"
          ></el-table-column>

          <el-table-column
            label="价格"
            prop="price"
            min-width="150"
          ></el-table-column>
          <el-table-column label="操作" min-width="150" fixed="right">
            <template #default="scope">
              <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
                content="查询该房屋所有订单情况"
              >
                <template #reference>
                  <el-button
                    size="small"
                    link
                    type="warning"
                    :icon="Edit"
                    @click="getBillByHouse(scope.row)"
                    >查询</el-button
                  >
                </template>
              </el-popover>

              <!-- <el-button type="danger" link :icon="Delete" @click="deleteUser(scope.row)">删除</el-button> -->
              <!-- <el-button size="small" link type="success" :icon="View" @click="visible = true">查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  getStates,
  getAllBills,
  getBillsByState,
  getBillsByHouse,
  deleteBills,
} from "@/api/bill";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";

// 分页配置信息
const paginationConfig = reactive({
  currentPage: 1,
  pageSize: 30,
  pageCount:1
});
// 当分页大小改变
const handleSizeChange = (size: number) => {
  paginationConfig.pageSize = size;
  getBillListByState(searchConf.state);
};
// 当页码改变
const handleCurrentChange = (page: number) => {
  paginationConfig.currentPage = page;
  getBillListByState(searchConf.state);
};

// 批量选择
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val.map((item: any) => item);
};

const tableConfig = reactive({
  label: "账单信息",
  loading: false,
  data: [] as any[],
});
// 查询条件
let searchConf = reactive({
  state: "",
});
// 查询条件内容
let searchContent = reactive({
  stateList: [] as any[],
});

// 获取查询条件
const getSearchContent = async () => {
  let res = await getStates();
  searchContent.stateList = res.data?.data ?? [];
};

// 查询账单 根据条件 state
const getBillListByState = async (state: string) => {
  if (state.trim() === "") {
    ElMessage.warning("请选择要查询订单的状态");
    return;
  }
  if (state === "全部") {
    getAllBill();
  } else {
    let res = await getBillsByState({
      state: state,
      page: paginationConfig.currentPage,
      num: paginationConfig.pageSize,
    });
    if (res.status === 200) {
      let data = res?.data;
      if (data) {
        tableConfig.data = data?.data ?? [];
        paginationConfig.pageCount = data?.num_pages ?? 1
        
        ElMessage.success("查询成功");
      }
      
    } else {
      ElMessage.error("查询失败");
    }
    tableConfig.loading = false;
  }
};
// 查询近期全部账单
const getAllBill = async () => {
  tableConfig.loading = true;
  let res = await getAllBills({
    page: paginationConfig.currentPage,
    num: paginationConfig.pageSize,
  });
  if (res.status === 200) {
    let data = res?.data;
    if (data) {
      tableConfig.data = data?.data ?? [];
      paginationConfig.pageCount = data?.num_pages ?? 1
      ElMessage.success("查询成功");
    }
  } else {
    ElMessage.error("查询失败");
  }
  tableConfig.loading = false;
};
// 查询该房屋所有订单情况
const getBillByHouse = async (row: any) => {
  tableConfig.loading = true;
  let res = await getBillsByHouse({
    uuid: row.uuid,
    page: paginationConfig.currentPage,
    num: paginationConfig.pageSize,
  });
  if (res.status === 200) {
    let data = res?.data;
    if (data) {
      tableConfig.data = data?.data ?? [];
      paginationConfig.pageCount = data?.num_pages ?? 1
      ElMessage.success("查询成功");
    }
  } else {
    ElMessage.error("查询失败");
  }
  tableConfig.loading = false;
};
// 批量删除房屋
const delPatchBills = () => {
  tableConfig.loading = true;
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请至少选择一项删除");
    tableConfig.loading = false;
    return;
  }
  let list = multipleSelection.value.map((item: any) => {
    return item.uuid;
  });
  deleteBills({ list: list })
    .then(async (res) => {
      if (res.status === 200) {
        ElMessage.success("删除成功");
        getAllBill();
      }
    })
    .catch((err) => {
      ElMessage.error("删除成功");
      tableConfig.loading = false;
    });
};
onMounted(async () => {
  await getSearchContent();
  // 查询失败没有获取到查询条件
  if (searchContent.stateList.length === 0) {
    searchConf.state = "";
  } else {
    searchConf.state = "已缴";
  }

  getBillListByState(searchConf.state);
});
</script>

<style scoped>
.bill-search-button {
  padding: 5px;
}
</style>
